<template>
  <div class="my">
    <header>
      
      <div class="user-info" v-if="loginStatus">
        <img :src="userInfo.imgUrl" alt="">
        <span>{{userInfo.nickname}}</span>
      </div>

      <div class="login" @click="goLogin" v-else>登录/注册</div>
    </header>
    <section>
      <h5>个人中心</h5>
      <ul>
        <li @click="goPath">
          <i class="iconfont">&#xe634;</i>
          <span>地址管理</span>
        </li>
        <li v-if="loginStatus" @click="loginOut">
          <i class="iconfont">&#xe892;</i>
          <span>退出登录</span>
        </li>
      </ul>
    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script>
import Tabbar from '../components/common/Tabbar.vue'
import {mapMutations, mapState} from 'vuex'
export default {
    name:"My",
    components:{
    Tabbar,
  },
  methods:{
    goLogin(){
      this.$router.push('/login')
    },
    ...mapMutations(['loginOut']),
    //地址管理页面
    goPath(){
      this.$router.push('/path')
    }
  },
  computed:{
    ...mapState({
      userInfo:state=> state.user.userInfo,
      loginStatus: state=>state.user.loginStatus
    })
  }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
.my{
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  header{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: (160 / @rootsize);
    background-color:#b0352f;
    .login{
      padding: (6  / @rootsize) (20 / @rootsize);
      background-color: #f6ab32;
      border-radius: 6px;
      color: #fff;
      font-size: (16 / @rootsize);
    }
    .user-info{
      display: flex;
      flex-direction: column;
      align-items: center;
      img{
        width: (60  / @rootsize);
        height: (60 / @rootsize);
        border-radius: 50%;
      }
      span{
        padding: (10 / @rootsize) 0;
        font-size: (18 / @rootsize);
        color: #fff;

      }
    }
  }
  section{
    flex: 1;
    overflow: hidden;
    h5{
      padding: (10 / @rootsize) (20 / @rootsize);
      border-bottom:1px solid #ccc;
      font-size: (18 / @rootsize);
      font-weight: 500;
      color: #6c6c6c;
    }
    ul{
      padding:(10 / @rootsize) (20 / @rootsize) ;
      li{
        display: flex;
        align-items: center;
        padding:(10 / @rootsize) 0 ;
        span{
          font-size: (16 / @rootsize);
          color: #4f4f4f;
        }
        i{
          margin-right: (5 / @rootsize);
          font-size: (35 / @rootsize);
          font-weight: 550;
          color: #b0352f;

        }
      }
    }
  }

}



</style>